<template>
    <div class="form-page">
        <el-form
            ref="dataForm"
            :model="dataForm"
            :inline="true"
            label-width="10em"
            class="data-form"
        >
            <div class="form-item xy-start al-str">
                <div class="title">绑定信息</div>
                <div class="yx-start al-start data" align="center">
                    <div class="childrenDiv">
                        <el-form-item label="学校" prop="schoolCode">
                            <el-select
                                v-model="dataForm.schoolCode"
                                filterable
                                placeholder="请选择学校"
                                remote
                                :remote-method="loadXx"
                                clearable
                                @change="changeSchool"
                            >
                                <el-option
                                    v-for="item in schools"
                                    :key="item.code"
                                    :label="item.name"
                                    :value="item.code"
                                >
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="学校学科类别" prop="departmentId">
                            <el-cascader
                                ref="classification"
                                :key="zeroOne"
                                v-model="dataForm.departmentId"
                                :props="departmentProps"
                                :show-all-levels="false"
                                filterable
                                clearable
                            ></el-cascader>
                        </el-form-item>
                    </div>
                    <div class="childrenDiv">
                        <el-form-item label="维普科目" prop="classificationId">
                            <el-cascader
                                ref="classification"
                                v-model="dataForm.classificationId"
                                :props="classificationProps"
                                :show-all-levels="false"
                                filterable
                                clearable
                            ></el-cascader>
                        </el-form-item>
                    </div>
                    <div>
                        <p>绑定后不可更改！</p>
                    </div>
                    <div class="childrenDiv">
                        <el-button
                            style="margin-left: 10px;"
                            size="small"
                            type="primary"
                            :loading="submitFlag"
                            @click="save"
                            >保存
                        </el-button>
                    </div>
                </div>
            </div>
        </el-form>
    </div>
</template>

<script>
import { FormPage } from "@/layout/mixin/iVue.js";
import {
    fetchClassificationChildren,
    fetchClassificationFirst
} from "@/api/course";
import {
    bindDepartment,
    fetchDepartmentChildren,
    fetchFirstStageBySchoolCode
} from "@/api/user";
import { get } from "@/api/request";

export default {
    name: "Bind",
    mixins: [FormPage],
    data() {
        return {
            zeroOne: 0,
            zeroTwo: 0,
            schools: null,
            dataForm: {
                classificationId: null,
                departmentId: null,
                schoolCode: null
            },
            classificationProps: {
                lazy: true,
                checkStrictly: true,
                emitPath: false,
                lazyLoad: this.fetchClassification
            },
            departmentProps: {
                lazy: true,
                checkStrictly: true,
                emitPath: false,
                lazyLoad: this.fetchDepartment
            }
        };
    },
    created() {
        this.loadXx();
    },
    methods: {
        //学校改变时
        changeSchool(schoolCode) {
            this.dataForm.schoolCode = schoolCode;
            this.dataForm.departmentId = [];
            ++this.zeroOne;
            // this.getTeacher(null, schoolCode);
        },
        //获取学校信息
        loadXx(query) {
            return get("/user/sys/school/list", {
                name: query,
                noVip: true
            }).then(res => {
                this.schools = res;
                return res;
            });
        },
        //获取学校专业
        fetchDepartment(node, resolve) {
            let schoolCode = this.dataForm.schoolCode;
            const { level } = node;
            if (this.schoolCode !== null) {
                if (!node.data) {
                    fetchFirstStageBySchoolCode({
                        schoolCode: schoolCode,
                        type: "xklb"
                    }).then(res => {
                        const nodes = Array.from(res).map(item => {
                            return {
                                value: item.id,
                                label: `${item.name}`,
                                leaf:
                                    level >= (item.children.length > 0 ? 1 : 0)
                            };
                        });
                        resolve(nodes);
                    });
                } else {
                    fetchDepartmentChildren({ id: node.data.value }).then(
                        res => {
                            const nodes = Array.from(res).map(item => {
                                return {
                                    value: item.id,
                                    label: `${item.name}`,
                                    leaf:
                                        level >=
                                        (item.children.length > 0
                                            ? level + 1
                                            : 0)
                                };
                            });
                            resolve(nodes);
                        }
                    );
                }
            }
        },
        fetchClassification(node, resolve) {
            const { level } = node;
            if (!node.data) {
                fetchClassificationFirst().then(res => {
                    const nodes = Array.from(res).map(item => {
                        return {
                            value: item.id,
                            label: `${item.name}`,
                            leaf: level >= (item.children.length > 0 ? 1 : 0)
                        };
                    });
                    resolve(nodes);
                });
            } else {
                fetchClassificationChildren({ id: node.data.value }).then(
                    res => {
                        const nodes = Array.from(res).map(item => {
                            return {
                                value: item.id,
                                label: `${item.name}`,
                                leaf:
                                    level >=
                                    (item.children.length > 0 ? level + 1 : 0)
                            };
                        });
                        resolve(nodes);
                    }
                );
            }
        },
        save() {
            let departmentId = this.dataForm.departmentId;
            let classificationId = this.dataForm.classificationId;
            bindDepartment({
                departmentId: departmentId,
                classificationId: classificationId
            }).then(res => {
                console.log(res);
            });
        }
    }
};
</script>

<style lang="scss" scoped>
.childrenDiv {
    margin: 0 auto;
}
</style>
